<html>
<head>
   <title>xy Map</title>
   <meta charset = "utf-8" />
   
   <link 
   rel  = "stylesheet" 
   type = "text/css" 
   href = "jsxgraph-0.99.5\jsxgraph.css" 
   />
   
   <script 
   type = "text/javascript" 
   src  = "jsxgraph-0.99.5\jsxgraphcore.js"
   ></script>  
</head>
<body>
  <div id = "myBox" class = "jxgbox center-block" style = "width:100%; height:100%; border: 1px solid black"></div>
   
   <!-- import scripts -->
   <script src  = "colors.js"></script> 
   <script src  = "xy.js"></script> 
   <script src  = "xy_route.js"></script> 
   <script src  = "xy_route_complete.js"></script>
   
   <!-- code -->
   <script type="text/javascript">
         
		var xp = -100000000000000000;
		var xn =  100000000000000000;
		var yp = -100000000000000000;
		var yn =  100000000000000000;
		
		for (i = 0; i < xy_route.length; i++) { 
			if (xp <= xy_route[i][0]){
			
				xp = xy_route[i][0];
			}
			if (yp <= xy_route[i][1]){
			
				yp = xy_route[i][1];
			}
		   if (xn > xy_route[i][0]){
		   
				xn = xy_route[i][0];
			}
		   if (yn > xy_route[i][1]){
		   
				yn = xy_route[i][1];
			}
		}
		
		xn = (xn - 1)*1.21;
		yp = (yp + 1)*1.21;
		xp = (xp + 1)*1.21;
		yn = (yn - 1)*1.21;
		
		if (xn >= 0){
			xn = -1.21;
		}
		
		if (yn >= 0){
			yn = -1.21;
		}
		
		if (xp <= 0){
			xp = 1.21;
		}
		
		if (yp <= 0){
			yp = 1.21;
		}
		
		<!-- chart -->
        var board = JXG.JSXGraph.initBoard('myBox', 
		{
		boundingbox:[xn, yp, xp, yn],  
		axis:{ ticks: { drawLabels: true }, firstArrow: true, strokeColor: 'black' },
		grid: { strokeWidth: 0.75 },
		showNavigation: true,		
		showCopyright:false,
		keepaspectratio: false
		}
		);
		<!-- end chart -->
		
	    <!-- route -->	
		var r = 0;
		var s = 0;
		var t = 0;
	    var u = 0;
		var v = 0;
		
		var s_temp = 0;
		var t_temp = 0;
		var v_temp = 0;
		
		var s_final = 0;
		var t_final = 0;
		
		var p = [];
		var x = [];
				
		for (var i = 0; i < xy_route.length; i++) {
		  if (xy_route_complete[i][5] == "start" || xy_route_complete[i][5] == "end"){
			r = r + 1;
		  }
		}
		
		for (var i = 0; i < xy_route.length; i++) {
		  if (xy_route_complete[i][5] == "start" || xy_route_complete[i][5] == "end"){
			s = i;
			i = xy_route.length;
		  }
		}
		
		for (var i = s + 1; i < xy_route.length; i++) {
		  if (xy_route_complete[i][5] == "start" || xy_route_complete[i][5] == "end"){
			t = i - 1;
			i = xy_route.length;
		  }
		}
		
		r = r/2;
		
		p[0] = board.create('point', [xy_route[0][0], xy_route[0][1]], {name:'', size: 10,  fillOpacity: 0.4, strokeOpacity: 0.4, color: colors[0] });

		for (var i = 0; i < xy_route.length; i++) {
		   if (xy_route_complete[i][5] == "start" || xy_route_complete[i][5] == "end"){
				p[i + 1] = board.create('point', [xy_route[i][0], xy_route[i][1]], {name:xy_route[i][2], face: '[]', size: 4, strokeColor: 'black', fillColor: 'goldenrod', highlightStrokeColor: 'green', highlightFillColor: 'green' });
			}else if (xy_route_complete[i][5] == "deliverShipment"  || xy_route_complete[i][5] == "delivery"){
				p[i + 1] = board.create('point',[xy_route[i][0], xy_route[i][1]], {name: xy_route[i][2]  + "-dlv", face:'o' , size: 3, strokeColor: 'black', fillColor:'orangered', highlightStrokeColor: 'teal', highlightFillColor: 'teal'});
			}else if (xy_route_complete[i][5] == "pickupShipment" || xy_route_complete[i][5] == "pickup"){
				p[i + 1] = board.create('point',[xy_route[i][0], xy_route[i][1]], {name: xy_route[i][2]+ "-pck", face:'o' , size: 3, strokeColor: 'black', fillColor:'springgreen', highlightStrokeColor: 'mediumorchid', highlightFillColor: 'mediumorchid'});
			}else if (xy_route_complete[i][5] == "break"){
				p[i + 1] = p[i]; 
			}						
	    }	
			
		for (var i = s; i < t; i++) { 
			board.create('arrow', [p[i  + 1], p[i + 2]], {color: colors[0], dash: 1, strokeWidth: 1.5 });
		}
		
		s_temp = s;
		t_temp = t + 1;
		s_final = s_temp;
		t_final = t_temp;
		
		for (var i = 0; i < r - 1; i++) {
		
			if (i > -1){
				u = u + 1;
			}
			
			if (u == colors.length){
				u = 0;
			}
			
			s = t + 2;
			
			for (var j = s + 1; j < xy_route.length; j++) {
			  if (xy_route_complete[j][5] == "start" || xy_route_complete[j][5] == "end"){
				t = j - 1;
				j = xy_route.length;
			  }
			}
	
			for (var k = s ; k < t; k++) { 
				board.create('arrow', [p[k + 1], p[k + 2]], {color: colors[u], dash: 1, strokeWidth: 1.5 });
		    }
		}
		<!-- end route -->
		
		<!-- animation  -->
		u = 0;
		v = p.length;
		v_temp = v;
		s = s_temp;
		t = t_temp - 1;
		
		for (var i = 0; i < r - 1; i++) { 
		
		if (i > -1){
			u = u + 1;
		}
		if (u == colors.length){
			u = 0;
		}
		
		p[v + i] = board.create('point', [xy_route[0][0], xy_route[0][1]], {name:'', size: 10,  fillOpacity: 0.4, strokeOpacity: 0.4, color: colors[u]});
		
		}
		
		startAnimation = function () 
	    {
			for (var i = 0; i < r - 1; i++) {
			
				s = t + 2;
				v = v_temp + i;
				
				for (var j = s + 1; j < xy_route.length; j++) {
				  if (xy_route_complete[j][5] == "end"){
					t = j - 1;
					j = xy_route.length;
				  }
				}
				
				p[v].moveAlong(p.slice(s + 1, t + 2), 1000, {interpolate: false});

			};
	    }
		
		function addMeTo() 
		{
			s = s_temp;
			t = t_temp - 1;
			v = v_temp;
			startAnimation();
			p[0].moveAlong(p.slice(s_final + 1, t_final + 1), 1000, {callback: addMeTo, interpolate: false});

		} 
		addMeTo();
		<!-- end animation -->

  </script>
  <!-- end code -->
  <!-- end import scripts -->
  
</body>
</html>
